<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空调系统-弹窗</title>
    <link rel="stylesheet" href="../../assets/less/device/index.css" />
  </head>

  <body>
    <div class="content" id="app">
      <div class="erweima">
        <div class="row1">
          <div>二维码</div>
        </div>
        <div class="row2" id="deviceQrcode"></div>
        <div class="row3">
          <div class="row3_left">所属产品</div>
          <div class="row3_right">
            {{ deviceInfo && deviceInfo.product ? deviceInfo.product.name : '-'
            }}
          </div>
        </div>
        <div class="row3">
          <div class="row3_left">重点设备</div>
          <div class="row3_right">{{ deviceInfo.star?'是':'否' }}</div>
        </div>
        <div class="row3">
          <div class="row3_left">设备标识</div>
          <div class="row3_right">{{ deviceInfo.identifier || '-' }}</div>
        </div>
        <div class="row3">
          <div class="row3_left">设备类型</div>
          <div class="row3_right">{{ deviceInfo.deviceType || '-' }}</div>
        </div>
        <div class="row3">
          <div class="row3_left">设备位置</div>
          <div class="row3_right">{{ deviceInfo.address || '-' }}</div>
        </div>
        <div class="row3">
          <div class="row3_left">所属厂家</div>
          <div class="row3_right">{{ deviceInfo.factoryName || '-' }}</div>
        </div>
      </div>
      <!-- 右侧的空调系统 -->
      <div class="air_box">
        <div class="air_row1">
          <div class="dian green"></div>
          <div class="air_title">{{deviceInfo.name}}</div>
          <!-- <img src="../../assets/images/air_system/icon1.png" alt="">
                <img src="../../assets/images/air_system/icon2.png" alt="">
                <img src="../../assets/images/air_system/icon3.png" alt="">
                <img src="../../assets/images/air_system/icon4.png" alt=""> -->
        </div>
        <div class="air_row2">
          <img
            :src="deviceInfo.image"
            title="设备图片"
            v-if="deviceInfo.image"
          />
          <img
            src="../../assets/images/deviceDefault.png"
            title="设备图片"
            v-else
          />
          <div class="quan">
            <div id="main" style="width: 75px; height: 75px"></div>
          </div>
          <div class="quan">
            <div id="main1" style="width: 75px; height: 75px"></div>
          </div>
        </div>
        <!-- 第三行 -->
        <div
          class="air_row3"
          :style="{'max-height':util.isNotEmpty(messageInfo)?'140px':'240px'}"
        >
          <div
            class="air_row3_left"
            :style="{width:util.isNotEmpty(deviceInfo.deviceCommands)?'75%':'100%'}"
            v-if="util.isNotEmpty(deviceInfo.deviceProperties)"
          >
            <div
              class="air_row3_left_item"
              v-for="item in deviceInfo.deviceProperties"
            >
              <div class="dian" :class="item.state===2?'red':'green'"></div>
              <div class="air_row3_left_item_title">{{item.name}}</div>
              <div
                class="air_row3_left_item_info"
                :class="item.state===2?'font_red':''"
              >
                {{util.getPropValueLastFormat(item)}}
              </div>
            </div>
          </div>
          <div
            class="air_row3_right"
            v-if="util.isNotEmpty(deviceInfo.deviceCommands)"
          >
            <!-- 按钮 -->
            <div
              class="btn"
              :class="index ==btnFlag?'btn_active':''"
              v-for="(item,index) in deviceInfo.deviceCommands"
              :key="index"
              @click="toggleBtn(index)"
            >
              {{item.name}}
            </div>
          </div>
        </div>
        <!-- 第四行 -->
        <div class="air_row4" v-if="util.isNotEmpty(messageInfo)">
          <div class="air_row4_title">
            <div
              class="dian red"
              style="margin-right: 6px; box-sizing: border-box"
            ></div>
            <div class="air_row3_left_item_info">
              {{getMessageTitle(messageInfo.title)}}
            </div>
            <img
              src="../../assets/images/air_system/icon5.png"
              class="row3_icon"
              alt=""
            />
          </div>
          <div class="air_row4_box">
            <div
              class="air_row4_box_left"
              :style="{width:util.isNotEmpty(messageInfo.imageContent)?'280px':'100%'}"
            >
              <div class="air_info">{{ messageInfo.textContent }}</div>
              <div class="air_time">
                <div>{{messageInfo.createDateTime}}</div>
                <div class="toHandle">
                  {{ messageInfo.confirmor ? '已处理' : '未处理' }}
                </div>
              </div>
            </div>
            <div class="air_row4_box_right" v-if="messageInfo.imageContent">
              <img :src="messageInfo.imageContent" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../config.js"></script>
    <script src="../../assets/lib/qrcode.js"></script>
    <script src="../../assets/lib/echarts.min.js"></script>
    <script src="../../assets/js/main.js" type="module"></script>
    <script type="module">
      new Vue({
        el: "#app", // 绑定元素
        data: {
          mes: "1",
          btnArr: ["开启", "关闭", "重置"],
          btnFlag: 0,
          deviceInfo: {},
          messageInfo: [],
          isShow: false,
        },
        mounted() {
          var result = util.queryUrlParams(location.href);
          let deviceId = util.isNotEmpty(result) ? result["id"] : null;
          let deviceName = util.isNotEmpty(result) ? result["name"] : null;
          this.loadData(deviceName);
          this.loadList(deviceId);
        },
        methods: {
          // 获取设备信息
          loadData(deviceName) {
            this.deviceInfo = {};
            let params = {};
            webApi.getDevice(deviceName, params).then((res) => {
              this.isShow = true;
              if (res.code === 0) {
                this.deviceInfo = res.result || {};
                this.createQrCode(this.deviceInfo.id);
                this.initCharts();
              }
            });
          },
          // 获取告警事件
          loadList(deviceId) {
            this.messageInfo = {};
            var objData = {
              pageNo: 1,
              pageSize: 20,
              childObject: deviceId,
              t: new Date().getTime(),
            };
            webApi.getRealTimeMessages(objData).then((res) => {
              if (res.code !== 0) {
                util.msgError(`获取设备事件失败,原因：${res.Msg}`);
              }

              var list = res.result.data;
              if (list && list.length > 0) {
                list.forEach((x) => {
                  let content = x.content;
                  if (content && Array.isArray(content)) {
                    let imageContent = content.find(
                      (con) => con.contentType === 2 || con.contentType === 3
                    );
                    let imageContentStr = imageContent
                      ? imageContent.content
                      : "";
                    // x.imageContent = imageContentStr.startsWith('http') ? imageContentStr : 'http://192.168.2.13:8883/' + imageContentStr
                    x.imageContent = imageContentStr
                      ? imageContentStr.startsWith("http")
                        ? imageContentStr
                        : window.iotWebConfig?.iotUrl + "/" + imageContentStr
                      : "";
                    // x.imageContent = require('../assets/img/face2.png')
                    x.textContent = content
                      .filter((con) => con.contentType < 2)
                      .map((c) => c.content)
                      .join(";");
                  }
                });
                this.messageInfo = list[0];
              }
            });
          },
          getMessageTitle(title) {
            let str = "";
            if (title && title.indexOf("|") != -1) {
              let arr = title.split("|");
              if (arr.length >= 3) {
                str = arr[0] + "-" + arr[1] + " 触发了 " + arr[2] + " 事件";
              } else if (arr.length == 2) {
                str = arr[0] + "触发了 " + arr[1] + " 事件";
              }
            }
            return str;
          },
          // 设备二维码
          createQrCode(id) {
            var url =
              window.iotWebConfig?.iotUrl +
              "/wechat/wxDeviceProperty.html?id=" +
              id;
            var qrcode = new QRCode("deviceQrcode", {
              text: url, // 需要转换为二维码的内容
              width: 100,
              height: 100,
              colorDark: "#000000",
              colorLight: "#ffffff",
              correctLevel: QRCode.CorrectLevel.H,
            });
            return qrcode;
          },
          initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main"));

            // 指定图表的配置项和数据
            //图标1的数值放这里
            let data1 = this.deviceInfo.extend
              ? this.deviceInfo.extend.Score
              : 0;
            var option = {
              tooltip: {
                trigger: "item",
                formatter: "{b} : {c}%",
              },
              series: [
                {
                  name: "进度",
                  type: "pie",
                  radius: ["80%", "65%"],
                  center: ["50%", "50%"], // 设置饼图的中心位置
                  startAngle: 90, // 起始角度，使得进度条从左向右增长
                  minAngle: 1, // 设置扇区的最小角度，避免扇区太小不显示
                  data: [
                    { value: data1, name: "健康值" }, // 假设进度为70%
                    {
                      value: 100 - data1,
                      name: "剩余",
                      itemStyle: { normal: { color: "#777777" } },
                    }, // 剩余部分设置为透明
                  ],
                  label: {
                    normal: {
                      formatter: (params) => {
                        // 根据参数决定显示的文本，这里只显示完成度的百分比
                        return `健康度\n\n${data1}%`;
                      },
                      position: "center",
                      show: true,
                      textStyle: {
                        fontSize: 10, // 可以根据需要调整字体大小
                        color: "#fff", // 文本颜色
                      },
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false, // 隐藏标签线
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#04C598", // 设置进度条的颜色
                    },
                  },
                },
              ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            var myChart1 = echarts.init(document.getElementById("main1"));
            // 第二个
            let data2 = this.deviceInfo.extend
              ? (this.deviceInfo.extend.ErrorRate * 100).toFixed(3)
              : 0;
            var option1 = {
              tooltip: {
                trigger: "item",
                formatter: "{b} : {c}%",
              },
              series: [
                {
                  name: "进度",
                  type: "pie",
                  radius: ["80%", "65%"],
                  center: ["50%", "50%"], // 设置饼图的中心位置
                  startAngle: 90, // 起始角度，使得进度条从左向右增长
                  minAngle: 1, // 设置扇区的最小角度，避免扇区太小不显示
                  data: [
                    { value: data2, name: "故障率" }, // 假设进度为70%
                    {
                      value: 100 - data2,
                      name: "剩余",
                      itemStyle: { normal: { color: "#777777" } },
                    }, // 剩余部分设置为透明
                  ],
                  label: {
                    normal: {
                      formatter: (params) => {
                        // 根据参数决定显示的文本，这里只显示完成度的百分比
                        return `故障率\n\n${data2}%`;
                      },
                      position: "center",
                      show: true,
                      textStyle: {
                        fontSize: 10, // 可以根据需要调整字体大小
                        color: "#fff", // 文本颜色
                      },
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false, // 隐藏标签线
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "#3191FF", // 设置进度条的颜色
                    },
                  },
                },
              ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);
          },
          //点击按钮切换
          toggleBtn(index) {
            this.btnFlag = index;
            let deviceInfo = this.deviceInfo;
            let action = this.deviceInfo.deviceCommands[index];
            let obj = action
              ? {
                  deviceName: deviceInfo.identifier,
                  commandName: action.identifier,
                  inputs: action.inputData || {},
                }
              : null;
            let strName = action.name;
            if (obj === null) {
              console.error(`设备 ${deviceInfo.name} 未找到 ${strName} 指令`);
              return;
            }
            webApi.executeActionByIdentifier(obj).then((res) => {
              if (res.code === 0) {
                console.error(`执行 ${strName} 指令成功`);
              } else {
                console.error(`执行 ${strName} 指令失败,原因：${res.Msg}`);
              }
            });
          },
        },
      });
    </script>
  </body>
</html>
